<template>
    <div class='container'>
      <div class="leftNav">
          <ul>
              <router-link to='/css/flex' tag='li'>flex</router-link>
              <router-link to='/css/transform'   tag='li'>transform</router-link>
              <router-link to='/css/transition'  tag='li'>transition</router-link>
          </ul>
      </div>
      <div class="rightConetent">
            <router-view></router-view>
      </div>
    </div>
</template>

<script>
export default {
    
}
</script>
<style lang="scss" scoped>
.container{
    display: flex;
    cursor: pointer;
    .leftNav{
        padding-top:50px;
        position: absolute;
        width:180px;
        background: #8efdfa;
      height: calc(100% - 50px);
        ul{
            li{
                &:first-of-type{
                    border-top:1px solid #dedede;
                }
                 padding-left:50px;
                width:100%;
                height:40px;
                line-height: 40px;
                text-align: left;
                border-bottom:1px solid #dedede;
            }
        }
    }
    .rightConetent{
        margin-left:200px;
    }
}
.currency{
     border-right:2px solid red!important;
     background:#0505f8;
     color:#fff;
}

</style>
